<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
    <script>
        /*        
        
        http的请求组成(请求报文)
            请求报文头(请求头)，存储请求必要的解释信息(请求类型、请求地址....)
            请求报文体(请求体),额外的请求参数携带

          http的响应组成(响应报文)
            响应报文头(响应头)，存储一些解释信息(如：响应类型....)
            响应报文体(响应体),服务器响应的结果 

        1. Query String Parameters(URL参数)
             + 请求头参数 => 参数被定义在请求头的 请求地址中
             + 该参数的携带方式主要被应用于无请求体的请求中
             + http|https协议的组成中，以?关键字分割地址和参数
             + 参数由 key=value&key=value…… 字符串格式进行组成
                 - key 参数属性名（该属性名由服务器段决定）
                 - value 参数属性值（理论上任何可以转换为字符串的数据都可以作为参数）
                     * URL地址存在长度限制，所以参数容量有限，一般用于携带简单的关键参数                  
                     * JS中有些数据类型强制转换为字符串，会输出无效数据
   
        2. Request payload 
           + 请求体参数 => 理论无参数大小限制 => 但取决于服务器的配置
            + 该参数的携带方式只能被应用于有请求体的请求中
             + 对于携带请求体的请求报文，在请求发送时报文头会被自动增加属性 Content-Type 描述参数格式
             + 不限制请求参数类型(Content-Type取值)，会自动识别参数数据格式，参数原值提供服务器端
             + 部分特殊服务器（java-tomcat,php,node……）不会自动处理该参数，此时服务器必须手动完成解析
             + axios 所有能够携带请求体参数的请求，当参数不是String和FormData数据类型时，默认都是发送 Request payload

        3. Form Data(请求体参数)[html标签form能够提供的两种数据格式]
             + 请求体参数 => 理论无参数大小限制 => 但取决于服务器的配置
             + 该参数的携带方式只能被应用于有请求体的请求中
             ==> application/x-www-form-urlencoded  表单不含文件参数数据格式
                 - 该格式实际上遵守的就是 URL 参数的组成格式
               - 但还是作为请求体参数进行发送
                - axios 带请求体参数方法发送请求时，如果参数类型是String,axios默认设置Content-Type为application/x-www-form-urlencoded
               - 此时请求参数格式将变为 From Data 参数数据         ==> multipart/form-data 表单含文件参数数据格式(二进制参数)
                 - 参数中包含常规文本参数和二进制文件参数两种，通过JS提供FormData构造函数完成二进制参数记录对象的创建
                - 通过创建的FormData对象才能完成 文本参数 和 文件参数的整合
                - axios 带请求体参数方法发送请求时，如果参数类型是FormData,axios默认设置Content-Type为multipart/form-data;boundary=--随机码
                 - 文件上传是需要服务器支持的（开启上传功能） 
                 
        */

    </script>
</head>

<body>
    <input type="button" value="URL参数" onclick="sendUrlParams()">
    <input type="button" value="URL参数" onclick="sendUrlParams2()">
    <script>
        function sendUrlParams(){
            axios({
                url:"http://127.0.0.1:3000/test/query?username=admin&tel=12345678987"
            }).then(function(res){
                console.log(res.data);
            }).catch(function(error){
                console.log(error);
            });
        }
        function sendUrlParams2(){
            axios({
                url:"http://127.0.0.1:3000/test/query",

                //查询字符串参数，不能使用data去传递数据
                params:{
                    username:"admin",
                    tel:"12356789876"
                }
            }).then(function(res){
                console.log(res.data);
            }).catch(function(error){
                console.log(error);
            });
        }
    </script>
</body>

</html>